<template>
  <div>
    <div>
      <el-form :inline="true"
               size="mini"
               style="height: 40px">
        <el-form-item>
          <report-select-way v-model="selectTime"></report-select-way>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleIconClick">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="exportToExcel">导出excel</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <dd-table height="calc(100vh - 200px)"
                :data="tableData"
                :config="config"
                border
                :loading="loading"
                @filter-change="filterHandler"
                :current-page="pagination.currentPage"
                :total="pagination.total"
                @current-change="changePage"
                :page-size="pagination.pageSize"
                @size-change="handleSizeChange">
      </dd-table>
    </div>
  </div>
</template>
<script>
import commonApi from '@/api/common.js'
import { Notification } from 'element-ui'
// 在线客服运营数据统计报表
export default {
  data () {
    return {
      loading: false,
      filterList: [],
      selectTime: {},
      tableData: [],
      // 表格配置
      config: [
        {
          label: '序号',
          prop: 'indexnum',
          width: '60'
        },
        {
          label: '日期',
          prop: 'dateMsg',
          'show-overflow-tooltip': true
        },
        {
          label: '渠道',
          prop: 'channel',
          'show-overflow-tooltip': true,
          'column-key': 'group',
          filters: []
        },
        {
          label: '机器人访问量',
          prop: 'robotAccess',
          'show-overflow-tooltip': true
        },
        {
          label: '转人工量',
          prop: 'conversionVolume',
          'show-overflow-tooltip': true
        },
        {
          label: '分流率',
          prop: 'distRate',
          'show-overflow-tooltip': true
        },
        {
          label: '短弃量',
          prop: 'shortGiveNum',
          'show-overflow-tooltip': true
        },
        {
          label: '人工接通量',
          prop: 'menConnectVolume',
          'show-overflow-tooltip': true
        },
        {
          label: '接通率',
          prop: 'contactRate',
          'show-overflow-tooltip': true
        },
        {
          label: '消息量',
          prop: 'msgNum',
          'show-overflow-tooltip': true
        },
        {
          label: '客服消息量',
          prop: 'agentMsgNum',
          'show-overflow-tooltip': true
        },
        {
          label: '客户消息量',
          prop: 'custMsgNum',
          'show-overflow-tooltip': true
        },
        {
          label: '平均等待时长',
          prop: 'avgAwitTime',
          'show-overflow-tooltip': true
        },
        {
          label: '平均应答速度',
          prop: 'avgResponseTime',
          'show-overflow-tooltip': true
        },
        {
          label: '平均会话时长',
          prop: 'avgSessionTime',
          'show-overflow-tooltip': true
        },
        {
          label: '满意度',
          prop: 'satisfy',
          'show-overflow-tooltip': true
        }
      ],
      pagination: {
        currentPage: 1,
        total: 0,
        pageSize: 20,
        // 0 不导出 1导出
        isExport: '0',
        params: {
          reportType: '',
          selectTime: [],
          group: []
        }
      }
    }
  },
  mounted () {
    this.getTableData()
  },

  methods: {
    // 导出excel表
    exportToExcel () {
      this.pagination.isExport = '1'
      let tHeader = []
      let filterVal = []
      for (let item of this.config) {
        filterVal.push(item.prop)
        tHeader.push(item.label)
      }
      // 参数有待确认
      commonApi
        .getOnlineCustomerServiceOperationTableData(this.pagination)
        .then(response => {
          if (response.retcode === '0') {
            require.ensure([], () => {
              const {
                export_json_to_excel
              } = require('@/utils/vendor/Export2Excel.js')
              const list = response.data.info
              const data = this.formatJson(filterVal, list)
              export_json_to_excel(
                tHeader,
                data,
                '在线客服运营数据统计报表'
              )
            })
            // this.tableData = response.data.info
            // this.pagination.total = response.data.total
          } else {
            Notification.error('数据返回失败')
          }
        })
      // excel数据导出
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    filterHandler (val) {
      this.pagination.params.group = val['group']
      this.pagination.isExport = '0'
      this.getTableData()
    },
    // 查询按钮
    handleIconClick () {
      this.pagination.params.selectTime = this.selectTime.selectTime
      this.pagination.params.reportType = this.selectTime.reportType
      this.pagination.isExport = '0'
      this.pagination.params.group = []
      this.getTableData()
    },
    // 切换页码
    changePage (val) {
      this.pagination.isExport = '0'
      this.pagination.currentPage = val
      this.getTableData()
    },
    // 可以调整每页条数
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.pagination.isExport = '0'
      this.getTableData()
    },
    // 获取数据表
    getTableData () {
      // 参数有待确认
      this.loading = true
      commonApi
        .getOnlineCustomerServiceOperationTableData(this.pagination)
        .then(response => {
          this.loading = false
          if (response.retcode === '0') {
            this.tableData = response.data.info
            this.pagination.total = response.data.total
            this.config[2]['filters'] = response.data.filterList
          } else {
            Notification.error('数据返回失败')
          }
        })
    }
  }
}
</script>
<style scoped>
.left {
  float: left;
  width: 20%;
  border: 1px solid #1f92ef;
}

.right {
  float: left;
  width: 79%;
  border: 1px solid #1f92ef;
}
</style>
